<script>
import  md5Tool from 'js-md5';
export default {
  name: "P1",
  data(){
    return{
      size1:'md',
      pane1: true,
      treeData:{},
      selectedKey:'',
      currentNode:{
        id:0,
        name: '',
        permStr:'',
        sort:0,
        menuType:0,
        icon:'',
        componentPath:'',
        hiddenFlagBool:false,
        routerName:'',
        routerPath:'',
        outerLinkFlagBool:false,
        root: true,
      }
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    handleClick(node) {
      console.log("Click Node:" + JSON.stringify(node));
      this.currentNode.id = node.id;
      this.currentNode.name = node.title;
      this.currentNode.permStr = node.permStr;
      this.currentNode.sort = node.sort;
      this.currentNode.icon = node.icon;
      this.currentNode.routerName = node.routerName;
      this.currentNode.routerPath = node.routerPath;
      this.currentNode.menuType = node.menuType;
      this.currentNode.root = node.root;
      this.currentNode.componentPath = node.componentPath;
      if (node.hiddenFlag===1){
        this.currentNode.hiddenFlagBool = true;
      }else {
        this.currentNode.hiddenFlagBool = false;
      }
      if (node.outerLinkFlag===1){
        this.currentNode.outerLinkFlagBool = true;
      }else {
        this.currentNode.outerLinkFlagBool = false;
      }

      console.log(this.currentNode);
    }
  },
  mounted(){

    this.$axios.get('/java/menu/getPermMenuTree')
        .then(response => {
          console.log(response.data);
          this.treeData = response.data;
        })
        .catch(error => {
          console.error(error);
        });

   let aa = md5Tool.md5('ri2bnfiewf');
   console.log(aa);




  }
}
</script>

<template>
  <div style="width:100%;">

    <lay-page-header content="p1页面" @back="handleBack"></lay-page-header>
    <lay-panel style="min-height: 800px;width:100%;">





      <lay-button type="normal" style="width: 200px">百搭按钮</lay-button>
      <br>
      <br>

      <div>
        <lay-split-panel>
          <lay-split-panel-item :space="300">

            <lay-tree
                :data="treeData"
                :tail-node-icon="false"
                :onlyIconControl="true"
                :default-expand-all="true"
                v-model:selectedKey="selectedKey"
                @node-click="handleClick"
            >
            </lay-tree>

          </lay-split-panel-item>
          <lay-split-panel-item>
            <div class="vertical-table">
              <lay-empty v-if="currentNode.root"></lay-empty>
              <lay-form  v-else :model="currentNode" :pane="pane1" :size="size1"  >
                <lay-form-item label="权限id" prop="id" label-width="150px">
                  <lay-input v-model="currentNode.id"  ></lay-input>
                </lay-form-item>
                <lay-form-item label="权限名称" prop="name" label-width="150px">
                  <lay-input v-model="currentNode.name"  ></lay-input>
                </lay-form-item>
                <lay-form-item label="权限类型" label-width="150px">
                  <lay-radio v-model="currentNode.menuType" name="action" :value="0" label="目录"></lay-radio>
                  <lay-radio v-model="currentNode.menuType"  name="action" :value="1" label="菜单页"></lay-radio>
                  <lay-radio v-model="currentNode.menuType"  name="action" :value="2" label="按钮"></lay-radio>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType!==0" label="权限标识" prop="permStr" label-width="150px">
                  <lay-input v-model="currentNode.permStr"  ></lay-input>
                </lay-form-item>
                <lay-form-item label="排序号" prop="sort" label-width="150px">
                  <lay-input v-model="currentNode.sort"  ></lay-input>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType===1" label="隐藏菜单页" prop="hiddenFlagBool"  label-width="150px">
                  <lay-switch v-model="currentNode.hiddenFlagBool"></lay-switch>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType===1" label="图标" prop="icon" label-width="150px">
                  <lay-icon-picker v-model="currentNode.icon"></lay-icon-picker>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType===1" label="vue路由名称" prop="routerName" label-width="150px">
                  <lay-input v-model="currentNode.routerName"></lay-input>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType===1"  label="vue路由地址" prop="routerPath" label-width="150px">
                  <lay-input v-model="currentNode.routerPath"></lay-input>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType===1"  label="是否外链" prop="outerLinkFlagBool" label-width="150px">
                  <lay-switch v-model="currentNode.outerLinkFlagBool"></lay-switch>
                </lay-form-item>
                <lay-form-item v-if="currentNode.menuType===1"  label="vue组件路径" prop="routerPath" label-width="150px">
                  <lay-input v-model="currentNode.componentPath"></lay-input>
                </lay-form-item>
              </lay-form>

              <!--            <div v-for="(value, name, index) in currentNode" :key="index" class="vertical-table-row">-->
              <!--              <div v-if="name==='id'" class="vertical-table-cell vertical-table-header">权限id</div>-->
              <!--              <div v-if="name==='name'" class="vertical-table-cell vertical-table-header">权限名称</div>-->
              <!--              <div v-if="name==='menuTypeStr'" class="vertical-table-cell vertical-table-header">权限类型</div>-->
              <!--              <div v-if="name==='permStr'" class="vertical-table-cell vertical-table-header">权限标识</div>-->
              <!--              <div v-if="name==='sort'" class="vertical-table-cell vertical-table-header">排序号</div>-->
              <!--              <div v-if="name==='icon'" class="vertical-table-cell vertical-table-header">图标</div>-->
              <!--              <div v-if="name==='hiddenFlag'" class="vertical-table-cell vertical-table-header">菜单页-是否隐藏</div>-->
              <!--              <div class="vertical-table-cell">-->
              <!--                <div v-if="name==='icon'">-->
              <!--                  <lay-icon :type="value"></lay-icon>-->
              <!--                </div>-->
              <!--                <div v-if="name==='hiddenFlag' && currentNode.menuTypeStr==='菜单页'">-->
              <!--                  {{value===0 ? "显示":"隐藏"}}-->
              <!--                </div>-->
              <!--                <div v-else>-->
              <!--                  {{value}}-->
              <!--                </div>-->
              <!--              </div>-->
              <!--            </div>-->

            </div>

          </lay-split-panel-item>

        </lay-split-panel>

      </div>



    </lay-panel>

    <lay-backtop :showHeight="300" :bottom="10" position="fixed"></lay-backtop>


  </div>
</template>

<style scoped>
.vertical-table {

  width: 100%;
}

.vertical-table-row {
  display: table-row;
}

.vertical-table-cell {
  display: table-cell;
  padding: 8px;
  border-bottom: 1px solid #ebeef5;
}

.vertical-table-header {
  font-weight: bold;
  border-right: 1px solid #ebeef5;
}
</style>